<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="员工管理"></xk-header>
		<!-- <view class="search-bar">
			<uni-search-bar :radius="20" :clearButton="false" :cancelButton="false"  placeholder="员工姓名" @confirm="searchInfo"></uni-search-bar>
		</view> -->
		<view class="list-info">
			<!-- <scroll-view class="data-list" scroll-y="true" :style="{height: scrollViewHeight + 'px'}"
				refresher-enabled="true" :refresher-triggered="tabs[tabIndex].triggered" :refresher-threshold="100"
				@scrolltolower="onScrollToLower()"  @refresherrefresh="onRefresh()"> -->
				<view class="item-view">
					<view  v-if="dataList.length > 0">
						<view class="data-item" v-for="(item, index) of dataList" :key="index">
							<view class="title">
								<view class="name">
									<image v-if="item.user_sex == '1'" :src="(imgUrl+'/wx/sex_1.png')"></image>
									<image v-else :src="(imgUrl+'/wx/sex_2.png')"></image>
									<text>{{item.user_name}}</text>
									<text class="position">（{{item.user_position}}）</text>
								</view>
								<view>
									<uni-icons @click="editEmployee(item)" style="margin-right: 20rpx;" size="20" color="#bbbbbb" type="compose"></uni-icons>
									<uni-icons @click="deleteEmployee(item)" size="20" color="#bbbbbb" type="trash"></uni-icons>
								</view>
							</view>
							<view class="info">
								<view class="name">
									<uni-icons size="18" color="#bbbbbb" type="phone"></uni-icons>
								</view>
								<view class="desc">{{item.user_phonenum}}</view>
							</view>
							<view class="info">
								<view class="name">
									<uni-icons size="18" color="#bbbbbb" type="email"></uni-icons>
								</view>
								<view class="desc">{{item.user_email}}</view>
							</view>

							<!-- <view class="info">
								<view class="name">反馈时间：</view>
								<view class="desc">{{item.apply_date}}</view>
							</view>
							<view class="info">
								<view class="name">反馈描述：</view>
								<view class="desc">
									<view>{{item.fb_desc}}</view>
									<image-list v-if="item.fb_pic" :pics="item.fb_pic"></image-list>
								</view>
							</view> -->
						</view>
					</view>
				</view>

				<view class="empty-view" v-if="!dataList || dataList.length <= 0">
					<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
					<view>哎呀，该界面暂无内容~</view>
				</view>
			<!-- </scroll-view> -->
		</view>
		<view class="bottom-view">
			<view class="common-btn" @click="addEmployee">新增员工</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				scrollViewHeight: 0,
				dataList: [],
			};
		},
		onShow(){
			this.queryList();
		},
		methods:{
			queryList() {
				this.$api.mySelf_getCustomerStaff().then(res=>{
					this.dataList = res
				})
			},
			searchInfo(e){

			},
			addEmployee(){
				uni.navigateTo({
					url: '/pagesC/employee/employee-edit'
				})
			},
			editEmployee(info){
				console.log('========',info)
				app.globalData.pageData = info
				console.log('========app.globalData.pageData',app.globalData.pageData)
				uni.navigateTo({
					url: '/pagesC/employee/employee-edit' //+ this.$util.urlParams(info)
				})
			},
			deleteEmployee(info){
				this.$util.confirm({
					content: '确认要删除该员工信息？',
					confirmText: '确定',
				}).then((isConfirm)=>{
					if (isConfirm) {
						this.$util.post({
							url:  'mySelf/removeCustomerStaff',
							data: {
								pi_customer_staff_id: info.pi_customer_staff_id
							}
						}).then(res => {
							this.$util.toast('人员信息删除成功！');
							this.queryList()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.search-bar{
	background-color: #FFFFFF;
	padding: 10rpx 30rpx;
}
.list-info {
	padding-bottom: 168rpx;
	.item-view {
		padding: 0rpx 30rpx;
	}
	.data-item{
		display: flex;
		flex: 1;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		background-color: #ffffff;
		flex-direction: column;
		.img{
			width: 335rpx;
			height: 250rpx;
			border-radius: 10rpx;
		}

		.title{
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
			margin-bottom: 20rpx;
			.name{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				.position{
					color: #999999;
					font-weight: normal;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
			// :first-child {
			// 	margin-right: 30rpx;
			// }
			// :last-child {
			// 	padding: 5rpx 15rpx;
			// 	font-size: 24rpx;
			// 	color: #2C72FF ;
			// 	background-color: rgba($color: #A5C2FF, $alpha: 0.16);
			// 	border-radius: 5rpx;
			// }

		}

		.info{
			display: flex;
			font-size: 28rpx;
			color: #333;
			margin-top: 10rpx;

			.name {
				color: #999;
				margin-right: 30rpx;
			}
			.cancel {
				font-size: 32rpx;
				font-weight: bold;
			}

			.submit {
				font-size: 32rpx;
				font-weight: bold;
				color: #0055FE;
			}

			.desc {
				flex: 1;
			}


			.desc-img {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;
				>image {
					width: 120rpx;
					height: 120rpx;
					margin: 0rpx 5rpx 5rpx 0rpx;
				}
			}

			.status {
				color: #2C72FF;
			}
		}
		.info-btn {
			display: flex;
			justify-content: flex-end;
			>view {
				width: 240rpx;
				margin-bottom: 0rpx;
			}
		}
		.bottom-info {
			margin-top: 20rpx;
			padding-top: 20rpx;
			justify-content: space-around;
			border-top: 1rpx #F5F5F5 solid;
		}
		.bottom-info-list {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx #F5F5F5 solid;
		}
	}
}
.bottom-view {
	position: fixed;
	background-color: #FFFFFF;
	width: 750rpx;
	bottom: var(--window-bottom);
}
</style>
